<div data-extend-template="layouts/details-page-with-breadcrumbs.html">
  <header data-block="header">
    <h2 translate>{{ contentCredential.name }}</h2>
  </header>

  <div data-block="item-actions">
    <button type="button" class="btn btn-default" ng-click="openModal()" ng-hide="denied('destroy_content_credentials', contentCredential)">
      <span translate>Remove Content Credential</span>
    </button>

    <div bst-modal="removeContentCredential(contentCredential)" model="contentCredential">
      <div data-block="modal-header" translate>Remove Content Credential {{ contentCredential.name }}</div>
      <div data-block="modal-body" translate>Are you sure you want to remove Content Credential {{ contentCredential.name }}?</div>
    </div>
  </div>

  <nav data-block="navigation">
    <ul class="nav nav-tabs details-nav">
      <li ng-class="{active: isState('content-credential.info')}">
        <a ui-sref="content-credential.info" translate>Details</a>
      </li>

      <li ng-class="{active: stateIncludes('content-credential.products')}">
        <a ui-sref="content-credential.products" translate>Products</a>
      </li>

      <li ng-class="{active: stateIncludes('content-credential.repositories')}">
        <a ui-sref="content-credential.repositories" translate>Repositories</a>
      </li>
    </ul>
  </nav>

  <div data-block="content">
    <section ui-view></section>
  </div>
</div>
